<template>
  <div class="scroll-box card-box">
    <div class="pane-shell">
      <el-form :inline="true"
               @submit.native.prevent
               :model="dataForm"
               ref="dataForm"
               @keyup.enter.native="search">
        <el-form-item>
          <el-select v-model="dataForm.operationType"
                     placeholder="操作类型"
                     clearable>
            <el-option v-for="item in statusOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="date"
                          @change="changeDatePicker"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="search">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     v-if="$hasPermission('tb:companyRecharge:addCompanyRecharge')"
                     @click="topUp">充值</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">
            <a style="color: #fff; text-decoration: none;"
               :href="`https://rydemo.appclouds.cn:9000/kaijin/template/recharge.xls`">导入模板下载</a>
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="Import">导入</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column type="index"
                         label="序号"
                         header-align="center"
                         align="center"
                         width="50">
        </el-table-column>
        <el-table-column prop="operationType"
                         label="操作类型"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.operationType === 0">后台充值</span>
            <span v-if="scope.row.operationType === 1">后台导入</span>
          </template>
        </el-table-column>
        <el-table-column prop="creatName"
                         label="创建人"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column prop="createDate"
                         label="创建时间"
                         show-overflow-tooltip
                         header-align="center"
                         align="center">
        </el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="180">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="rechargeRecord(scope.row.id)">充值记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>
    <Import ref="importDialog"
            @callBack="clearDialog"></Import>
    <top-up ref="topUpDialog"
            @callBack="clearDialog"></top-up>
    <recharge-record ref="rechargeRecordDialog"></recharge-record>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Import from './import'
import TopUp from './top-up.vue'
import RechargeRecord from './recharge-record.vue'
export default {
  mixins: [mixinViewModule, formValidate],
  data () {
    return {
      isAdd: true,
      isDisabled: true,
      user: {},
      mixinViewModuleOptions: {
        getDataListURL: '/tb/companyRecharge/queryPage',
        getDataListIsPage: true
      },
      dataList: [],
      statusOptions: [
        {
          label: '后台充值',
          value: 0
        },
        {
          label: '后台导入',
          value: 1
        }
      ],
      date: '',
      total: 0,
      dataForm: {
        operationType: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  mounted () {
    this.getDataList()
  },
  components: {
    tableTemplate,
    Import,
    TopUp,
    RechargeRecord
  },
  computed: {
  },
  methods: {
    /**
     * 时间格式转换
     */
    timeFormate (timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1
      let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate()
      return year + '-' + month + '-' + date
    },
    changeDatePicker (val) {
      if (val) {
        this.dataForm.startTime = this.timeFormate(val[0])
        this.dataForm.endTime = this.timeFormate(val[1])
      } else {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
    },
    // 导入
    Import () {
      this.openDialog('importDialog')
    },
    clearDialog () {
      this.getDataList()
    },
    // 充值
    topUp () {
      this.openDialog('topUpDialog')
    },
    // 充值记录
    rechargeRecord (data) {
      this.openDialog('rechargeRecordDialog', data)
    },
    // 查询
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.user-dialog {
  background: rgba(0, 0, 0, 0.5);
}
.download {
  text-decoration: none;
  color: #fff;
}
.tree-input {
  width: 100%;
  position: relative;
  .close {
    position: absolute;
    right: 10px;
    top: 13px;
    font-size: 16px;
    color: #858585;
    cursor: pointer;
    background-color: white;
  }
}
.addBtn {
  ::v-deep .el-form-item__content {
    display: flex;
    .user-switch {
      display: flex;
      align-items: center;
      margin-right: 15px;
      .message-title {
        margin-right: 10px;
      }
    }
  }
}
.card-box {
  padding: 0 !important;
}
.el-pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
